import React, {Component} from 'react'

import { Tag,Button } from 'antd';

import moment from 'moment';

import { Row, Col,DatePicker,TimePicker,Modal,message  } from 'antd';

import './info.css'

import Table from '../../common/table'

import { connect } from 'react-redux'

import {inforesult} from '../../actions/info'

import axios from 'axios'



const confirm = Modal.confirm 


const Tendency=['全部','负面','中性','正面']

const browse=['全部','已阅','未阅']

const chunk =['列表','摘要']




const rangeCoury =['全部','全国','本地','境外']

const showoff =['合并','展开']

const sortList =['时间降序','时间升序','相关性排序']


class TagList extends Component{
  constructor(props){
    super(props);
    this.state={
    }
  }
  handleclear(){
    let arrData=this.props.tagList
    arrData=[]
    this.props.update(arrData)
  }
  render(){
    return(
      <div className="tag">
          <div className="tag-li">
            {
              this.props.tagList.map((item,i)=>(
                <Tag closable>{item}</Tag>
              ))
            }
          </div>
          <span onClick={()=>this.handleclear()}>清除全部</span>
        </div>
    )
  }
}
//顶部类型选择
class Tabchose extends Component{
  constructor(props){
    super(props);
    this.state={
      currentHtml:'',
      currentIndex:0
    }
  }
  handleChoes(e){
    var oIndex= Number(e.target.getAttribute('data-key'))
    var key=this.props.number
    var oValue=e.target.innerHTML
    let tablist=this.props.result
    var ocuIndex=0;
    if(oIndex===0){
      tablist.splice(key,1)
    }else{
      tablist[key]=oValue
    }
    this.setState({
      currentIndex:oIndex
    })
    this.props.onAdd(tablist)
    if(oValue==="正面"){
      ocuIndex=2
    }
    this.props.onAdd(oIndex-1)
  }
  render(){
    return(
      <div className="label-li">
        <label>{this.props.title}：</label>
        <div className="tab">
          {
            this.props.tabli.map((item,i)=>{
              console.log(this.state.currentIndex)
              if(this.state.currentIndex===i){
                return(
                  <span className='active' data-key={i}>{item}</span>
                )
                
              }else{
                return(
                  <span onClick={(e)=>this.handleChoes(e)} className={this.state.currentIndex===i?'active':''} data-key={i}>{item}</span>
                ) 
              }
            })
          }
        </div>
      </div>
    )
  }
}


//table 
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: record => ({
    disabled: record.name === 'Disabled User', // Column configuration not to be checked
    name: record.name,
  }),
};

// 中部类型选择
class Taball extends Component{
  constructor(props){
    super(props);
    this.state={
      currentIndex:0
    }
  }
  
  handle(e){
    var data=[];
    var oIndex= Number(e.target.getAttribute('data-key'))
    this.setState({
      currentIndex:oIndex
    })
    this.props.changereasult(data)
  }
  render(){
    return(
      <div className="typeli">
        {
          this.props.tanList.map((item,i)=>(
              <div className={i===this.state.currentIndex?'active':''} onClick={(e)=>this.handle(e)} data-key={i}>{item}</div>
          ))
        }
      </div>
    )
  }
}

@connect(
  state => state.Inforesult,
  {inforesult}
)
// 整体
class Info extends Component{
  constructor(props){
    super(props);
    this.state={
      tableData:[],
      tagList:[],
      decList:['宿迁论坛','沭阳网'],
      tanList:['全部','新闻','论坛','微信','手机App','微博','平面媒体','博客','贴吧'],
      loading:true,
      isFirst:true,
      startData:this.startTime(),
      endData:this.endTime(),
      startTime:this.startTime()+" 00:00:00",
      endTime:this.endTime()+" "+this.nowTime()+":00",
      sortType:'desc',
      scope:-1,
      websiteType :-1,
      positiveOrNegative:-1,
      currentPage:1,
      limit:50,
      sortField:'poTime',
      abroad:-1,
      categoryId:'',
      searchType:"all",
      topicId:""
    }
    this.onChange=this.onChange.bind(this)
    this.onChangestime=this.onChangestime.bind(this)
    this.onChangend=this.onChangend.bind(this)
    this.onChangeendtime=this.onChangeendtime.bind(this)
  }
  startTime(){
    console.log(moment().format('YYYY-MM-DD'))
    return moment().format('YYYY-MM-DD')
  }
  endTime(){
    console.log(moment().format('YYYY-MM-DD'))
    return moment().format('YYYY-MM-DD')
  }
  nowTime(){
    return moment().format('HH:mm')
  }
  renderReault(){
    axios.post('vrv-monitor-platform-web/data/query',{
      isFirst:true,
      startTime:this.state.startTime,
      endTime:this.state.endTime,
      sortType:'desc',
      scope:-1,
      websiteType :-1,
      positiveOrNegative:this.state.positiveOrNegative,
      currentPage:1,
      limit:50,
      sortField:'poTime',
      abroad:-1,
      categoryId:'',
      searchType:"all",
      topicId:""
    }).then((res)=>{
      console.log(res.data)
      this.setState({
        tableData:res.data.data
      })
    })
  }
  componentDidMount(){
    this.renderReault()
  }
  
  handleclear(){

  }
  sureBtn(){
    this.renderReault()
  }

  //筛选条件增减
  condChange(result){
      this.setState({
        tagList:result
      }
    )

  }
  posChange(index){
    this.setState({
      positiveOrNegative:index
    },()=>{
      this.renderReault()
    })
  }

  //开始日期
  onChange(date,dateString){
    console.log(dateString+"=====")
    this.setState({
      startTime:dateString+" 00:00:00",
      startData:dateString
    })
  }
  //结束日期
  onChangend(data,dateString){
    this.setState({
      endTime:dateString+" "+this.nowTime(),
      endData:dateString
    })
  }
  //开始时间
  onChangestime(time, timeString){
    this.setState({
      startTime:this.state.startData+" "+timeString+":00"
    })
  }
  //结束时间
  onChangeendtime(time, timeString){
    this.setState({
      endTime:this.state.endData+" "+timeString+":00"
    })
  }
  tableAction(actionKey){
    alert(actionKey)
    if(actionKey==="删除"){
      confirm({
        title: '提示',
        content: '确定删除吗',
        onOk: () => {
            message.success('删除成功')
        },
        onCancel() {}
      })
    }else if(actionKey==="收藏"){
      message.success('收藏成功')
    }else if(actionKey==="上传"){
      message.success('上传成功')
    }
  }
  changeResult(result){
    this.setState({
      data:result
    })
  }
  render(){
    let tagListresult=this.state.tagList
    const num=this.props
    console.log(num)
    return(
      <div className="info-content">
        <TagList tagList={tagListresult} update={(result)=>this.condChange(result)}></TagList>
        <div className="filter-screen">
          <Row>
            <Col span={14}>
              <div className="left">
                <div className="li">
                  <label>检测时间：</label>
                  <span><DatePicker onChange={this.onChange} defaultValue={moment(this.startTime())} /></span>
                  <span><TimePicker format="HH:mm" onChange={this.onChangestime}  defaultValue={moment('00:00','HH:mm')}></TimePicker></span>
                  <span className="interval">to</span>
                  <span><DatePicker onChange={this.onChangend} defaultValue={moment(this.endTime())}/></span>
                  <span><TimePicker format="HH:mm" defaultValue={moment(this.nowTime(),'HH:mm')}  onChange={this.onChangeendtime}></TimePicker></span>
                  <Button type="primary" onClick={()=>this.sureBtn()}>确定</Button>
                </div>
                <Tabchose title={'情感倾向'} tabli={Tendency} onAdd={(index)=>this.posChange(index)} result={this.state.tagList} number='0' postive={this.state.positiveOrNegative}></Tabchose>
                <Tabchose title={'浏览性'} tabli={browse} onAdd={(result)=>this.condChange(result)} result={this.state.tagList}  number='1'></Tabchose>
                <Tabchose title={'查看模式'} tabli={chunk} onAdd={(result)=>this.condChange(result)} result={this.state.tagList}  number='2'></Tabchose>
              </div>
            </Col>
            <Col span={10}>
              <div className="right">
                <Tabchose title={'检测范围'} tabli={rangeCoury} onAdd={(result)=>this.condChange(result)} result={this.state.tagList} number='3'></Tabchose>
                <Tabchose title={'相似文章'} tabli={showoff} onAdd={(result)=>this.condChange(result)} result={this.state.tagList} number='4'></Tabchose>
                <Tabchose title={'排序方式'} tabli={sortList} onAdd={(result)=>this.condChange(result)} result={this.state.tagList} number='5'></Tabchose>
                <Tabchose title={'检测范围'} tabli={this.state.decList} onAdd={(result)=>this.condChange(result)} result={this.state.tagList} number='6'></Tabchose>
              </div>
            </Col>
          </Row>
        </div>
        <Taball tanList={this.state.tanList} changereasult={()=>this.changeResult()}></Taball>
        <div className="table">
          <Table
          click={this.tableAction}
          data={this.state.tableData} 
          rowSelection={rowSelection}
          ></Table>
        </div>
      </div>
    )
  }
}

export default Info